<script type="text/javascript" src="/pages/database/database.js"></script>
<div id="databaseInfo" class="position-compare-button"
     style="padding: 20px; background-color: #F2F2F2;">
    <div style="margin-left: 26%; margin-bottom: 2%; font-size: 16px;">
        <span>
            请选择源数据库与目标数据库需要比对的库,<i style="color: red;">（注：目前只能各选择一个库进行比对）</i>
        </span>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">源数据库</div>
                <div class="layui-card-body">
                    <table id="sourceDatabases" lay-filter="source-databases"></table>
                    <script type="text/html" id="sourceColor">
                        {{#  if(d.color === 'red'){ }}
                        <span style="color: red;">{{ d.name }}</span>
                        {{#  } else { }}
                        {{ d.name }}
                        {{#  } }}
                    </script>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">目标数据库</div>
                <div class="layui-card-body">
                    <table id="targetDatabases" lay-filter="target-databases"></table>
                    <script type="text/html" id="targetColor">
                        {{#  if(d.color === 'red'){ }}
                        <span style="color: red;">{{ d.name }}</span>
                        {{#  } else { }}
                        {{ d.name }}
                        {{#  } }}
                    </script>
                </div>
            </div>
        </div>
    </div>
    <div style="margin-left: 47%;  position: fixed; bottom:7px;left: 93px;">
        <button class="layui-btn" id="compareTable" style="font-size: 22px;">开始比较</button>
    </div>
</div>